<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-06-24 16:38:54
 * @LastEditTime: 2024-07-02 16:31:14
 * @FilePath: \project\src\views\product\spu\index.vue
-->
<template>
  <div>
    <!-- 分类 -->
    <Category :isTable="isTable"/>

    <!-- spu -->
    <el-card style="margin: 10px 0;">
      <!-- 展示已有数据 -->
      <div v-show="isTable==0">
        <el-button type="primary" icon="plus" :disabled="!categoryStore.category3Id" @click="hAddSpu">添加SPU</el-button>
        <el-table :data="spuData" border style="margin: 10px 0;">
          <el-table-column label="序号" width="80" type="index" />
          <el-table-column prop="spuName" label="SPU名称" width="180" />
          <el-table-column prop="description" label="SPU描述" show-overflow-tooltip />
          <el-table-column prop="address" label="操作" width="220">
            <template #="{row, $index}">
              <el-button size="small" type="primary" icon="plus" title="添加sku" @click="hAddSku(row)"></el-button>
              <el-button size="small" icon="edit" @click="hEditSpu(row)"></el-button>
              <el-button size="small" type="info" icon="view" @click="hViewSpu(row)"></el-button>
              <el-popconfirm
                width="220"
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon="InfoFilled"
                :title="`确认删除${row.spuName}这个SPU吗?`"
                @confirm="hDeleteSpu(row.id)"
              >
                <template #reference>
                  <el-button type="danger" icon="delete" size="small"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 10]"
          background
          layout="prev, pager, next, jumper,->,sizes, total"
          :total="total"
          @size-change="hSizeChange"
          @current-change="hgetSpuList"
        />
      </div>
      <!-- 添加/修改 spu -->
      <spuForm ref="spuRef" v-show="isTable==1" @changeIsTable="changeIsTable"></spuForm>
      <!-- 添加 sku -->
      <skuForm ref="skuRef" v-show="isTable==2" @changeIsTable="changeIsTable"/>
      <!-- 预览 sku列表 -->
      <el-dialog v-model="dialogSku" title="SKU列表" width="800">
        <el-table :data="skuList" border>
          <el-table-column prop="skuName" label="sku名字" show-overflow-tooltip/>
          <el-table-column prop="price" label="sku价格" width="150" />
          <el-table-column prop="weight" label="sku重量" width="150"/>
          <el-table-column prop="skuDefaultImg" label="sku图片" width="130">
            <template #="{row}">
              <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;;">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue';
import {reqDeletSpu, reqSkuInfoList, reqSpuList} from '@/api/product/spu/index'
import { spuResponse, Records, SpuValue, skuInfoResponse, SkuInfo } from '@/api/product/spu/type';
import spuForm from './spuForm.vue'
import skuForm from './skuForm.vue'
import useCategoryStore from '@/store/modules/category';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore()

let isTable = ref<number>(0) // 0：已有数据 1：添加编辑spu 2:添加sku
let spuData = ref<Records>([])
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
let total = ref<number>(0)
// 获取子组件 spuForm
let spuRef = ref()
// 获取子组件 skuForm
let skuRef = ref()
let skuList = ref<SkuInfo[]>([]) // sku列表
let dialogSku = ref<boolean>(false)

// 获取当前已有的spu列表
const hgetSpuList = async (page=1)=>{
  currentPage.value = page
  const res:spuResponse = await reqSpuList(currentPage.value, pageSize.value, categoryStore.category3Id)
  if(res.code!=200) return
  spuData.value = res.data.records
  total.value = res.data.total
}
watch(()=>categoryStore.category3Id, ()=>{
  if(!categoryStore.category3Id) return
  hgetSpuList()
})
const hSizeChange = ()=>{
  hgetSpuList()
}
// 新增spu
const hAddSpu = ()=>{
  spuRef.value.initAddSpu(categoryStore.category3Id) //调用spu子组件方法
  isTable.value = 1 // spu
}
// 编辑spu
const hEditSpu = (row:SpuValue)=>{
  spuRef.value.initSpuData(row) //调用spu子组件方法
  isTable.value = 1 // spu
}
// 删除spu
const hDeleteSpu = async (id:number)=>{
  const res = await reqDeletSpu(id)
  if(res.code!=200) return ElMessage({type: 'error',message: '删除失败'+res.message})
  ElMessage({type: 'success',message: '删除成功'})
  hgetSpuList(spuData.value.length>1?currentPage.value:currentPage.value-1)
}
// 添加sku
const hAddSku =(row:SpuValue) =>{
  skuRef.value.initSkuData(categoryStore.category1Id, categoryStore.category2Id,row) //调用spu子组件方法
  isTable.value = 2 // sku
}
// 查看 sku 列表
const hViewSpu =async (row:SpuValue) =>{
  const res:skuInfoResponse = await reqSkuInfoList((row.id as number))
  if(res.code!=200) return
  skuList.value = res.data
  dialogSku.value = true // dialog显示
}
// 页面的切换
const changeIsTable = (obj:any) =>{
  isTable.value = obj.val1
  if(obj.val2 == 'edit') {
    hgetSpuList(currentPage.value)
  } else {
    hgetSpuList()
  }
  spuRef.value.clearData() // 清除 spu组件数据
}

// 组件销毁时清空数据
onUnmounted(()=>{
  categoryStore.$reset()
})
</script>

<style lang="scss" scoped>

</style>